.levels {
  width: 70%;
}

.content {
  padding: 0 5%;
}

.Scrool {
  width: 100%;
}

.flex {
  display: flex;
}

.Scrool article li,
.Scrool article p {
  font-size: large;
}

.Number a {
  margin: 0em 0.5em;
}

@media screen and (min-width: 1000px) {
  .fade img {
    height: 100%;
  }
}

@media screen and (min-width: 1400px) {
  .Scrool article li,
  .Scrool article p {
    font-size: 20px;
  }
}

@media screen and (min-width: 1600px) {
  .Scrool article li,
  .Scrool article p {
    font-size: 23px;
  }
}

@media screen and (min-width: 1800px) {
  .Scrool article li,
  .Scrool article p {
    font-size: 28px;
  }
}

@media screen and (min-width: 2000px) {
  .Scrool article li,
  .Scrool article p {
    font-size: 30px;
  }
}

@media screen and (max-width: 1250px) {
  .Float {
    height: 3.5cm;
    width: 650px;
  }
}

@media screen and (max-width: 1000px) {
  .levels {
    width: 90%;
  }

  .flex {
    flex-direction: column;
  }

  .fade {
    border-radius: 0;
  }
}

@media screen and (max-width: 750px) {
  .Float {
    height: 5cm;
    width: 500px;
  }
}

@media screen and (max-width: 550px) {
  .levels {
    width: 90%;
    margin: 1em auto;
  }

  .level-text-holder {
    font-size: 15px;
    padding: 5px;
  }

  h4 {
    margin: 5px 0;
  }

  .content {
    padding: 0;
  }

  .Scrool article li,
  .Scrool article p {
    font-size: medium;
  }

  .Float {
    height: 6.5cm;
    width: 400px;
  }
}

@media screen and (max-width: 450px) {
  .Float {
    height: 5.5cm;
    width: 300px;
  }
}